<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<link href="css/templatemo_style.css" rel="stylesheet">
<link href="css/templatemo_misc.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<style type="text/css">
.templatemo_form input {
	height: 20px;
}
</style>
<script type="text/javascript">

function validate(param, paramMessage){

	var xmlHttpRequest=init();

	  function init(){

	if (window.XMLHttpRequest) {
	           return new XMLHttpRequest();
	       } else if (window.ActiveXObject) {
	           
	           return new ActiveXObject("Microsoft.XMLHTTP");
	       }
	}
	var parameter=document.getElementById(param);
	var type=document.getElementById("type");
	xmlHttpRequest.open("GET", "AddUser?val="+ encodeURIComponent(parameter.value)+"&parameter="+param+ "&type="+encodeURIComponent(type.value), true);
	xmlHttpRequest.onreadystatechange=processRequest;
	xmlHttpRequest.send(null);

	function processRequest(){

	if(xmlHttpRequest.readyState==4){
	   if(xmlHttpRequest.status==200){
	    
	      processResponse();

	    }
	  }
	}

	function processResponse(){

	var xmlMessage=xmlHttpRequest.responseXML;

	var validation=xmlMessage.getElementsByTagName("valid")[0].firstChild.nodeValue;

	if(validation== "true"){
		if (param == "username"){
		var paramMessage=document.getElementById("usernameMessage");
		paramMessage.innerHTML = "OK";}
		//if (param == "email"){
		//	var paramMessage=document.getElementById("emailMessage");
		//	paramMessage.innerHTML = "OK";}
	}
	else 	if(validation== "false"){
		if (param == "username"){
			var paramMessage=document.getElementById("usernameMessage");
			paramMessage.innerHTML = "<div style=\"color: red\">nazwa zajeta</div>";}
		//if (param == "email"){
		//	var paramMessage=document.getElementById("emailMessage");
		//	paramMessage.innerHTML = "<div style=\"color: red\">e-mail juz zostal uzyty</div>";}
		//  }
	 }
	}  


</script>


<header>
	<h1>Formularz rejestracyjny</h1>
</header>
<div class="content">

	<form role="form" style="position: block; top: -40px;" id='addClient' enctype="multipart/form-data"
		action="AddUser" method="POST">

		<table>
			<tr>
				<td>Nick:</td>
				<td>
					<div class="templatemo_form">
						<input type="text" id="username" name="username"
							class="form-control" required
							placeholder="Wpisz nazwe uzytkownika" maxlength="80"
							autocomplete="off" onkeyup="validate('username')">
					</div>
				</td>
<td>
					<div id="usernameMessage"></div>
				</td>
			</tr>
			<tr>

				<td>Data urodzenia:</td>
				<td>
					<!-- <input type="text" id="birth_date" name="birth_date"> -->
					<div class="templatemo_form">
						<input type="date" id="birth_date" name="birth_date" required
							placeholder="Wpisz datę" class="form-control"
							pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))">
					</div>
			</tr>

			<tr>

				<td>Podaj email:</td>
				<td>
					<div class="templatemo_form">
						<input type="email" id="email" name="email" required class="form-control"
							placeholder="Wpisz adres e-mail" maxlength="255" onkeyup="validate('email')">
					</div>
				</td>
				<td>
					<div id="emailMessage"></div>
				</td>

			</tr>

			<tr>
				<td>Hasło:</td>
				<td><div class="templatemo_form">
						<input type="password" id="password" name="password" required
							placeholder="Wpisz hasło" maxlength="80">
					</div></td>
<td>
<div id="passwordCheck"></div>
			</tr>
			<tr>
				<td>Powtórz haslo:</td>
				<td><div class="templatemo_form">
						<input type="password" id="confirm_password" class="form-control"
							name="confirm_password" required placeholder="Powtórz hasło"
							maxlength="80">
					</div></td>
<td>
<div id="confirmpasswordCheck"></div>
</td>
			</tr>
			
			<tr>
				<td><input type="hidden" id="type" name="type" value="client" />
				</td>
			</tr>
			<tr>
				<td>Płec:</td>
				<td><div class="templatemo_form">
						<select id="gender" name="gender" required>
							<option value="male" selected>męzczyzna</option>
							<option value="female">kobieta</option>
						</select>
					</div></td>

			</tr>
			<tr>
				<td>Imię:</td>
				<td><div class="templatemo_form">
						<input type="text" name="name" id="name" class="form-control"
							placeholder="Wpisz swoje imię" maxlength="255" required="required">
					</div></td>

			</tr>
			<tr>
				<td>Nazwisko:</td>
				<td><div class="templatemo_form">
						<input type="text" name="surname" id="surname" class="form-control"
							placeholder="Wpisz swoje nazwisko" maxlength="255">
					</div></td>

			</tr>
			<tr>
				<td>Numer telefonu:</td>
				<td><div class="templatemo_form">
						<input type="tel" name="phone" id="phone" class="form-control"
							placeholder="666-666-666" maxlength="80"
							pattern="\d{3}[\-]\d{3}[\-]\d{3}">
					</div></td>

			</tr>
			<tr>
					<td>Avatar: </td>
					<td><input type="file" name="avatar" id="avatar" size="50"/></td>
				</tr>
		</table>
		<div class="templatemo_form">
			<button class="btn btn-primary" type="submit" id="registration">Zarejestruj
				mnie!</button>
		</div>
	</form>

</div>